import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

import '../components/PageWrap.dart';

class TransformLn extends StatefulWidget {
  const TransformLn({super.key});

  @override
  State<TransformLn> createState() => _TransformLnState();
}

class _TransformLnState extends State<TransformLn> {
  @override
  Widget build(BuildContext context) {
    return PageWrap(
      title: "变换（Transform）",
      children: <Widget>[
        Padding(
            //上下各添加8像素补白
            padding: EdgeInsets.symmetric(vertical: 50, horizontal: 50),
            child: Container(
              color: Colors.black,
              child: Transform(
                alignment: Alignment.topRight, //相对于坐标系原点的对齐方式
                transform: Matrix4.skewY(0.3), //沿Y轴倾斜0.3弧度
                child: Container(
                  padding: const EdgeInsets.all(8.0),
                  color: Colors.deepOrange,
                  child: const Text('Apartment for rent!'),
                ),
              ),
            )),
        SizedBox(
          height: 50,
        ),
        DecoratedBox(
          decoration: BoxDecoration(color: Colors.red),
          //默认原点为左上角，左移20像素，向上平移5像素
          child: Transform.translate(
            offset: Offset(-20.0, -5.0),
            child: Text("Hello world"),
          ),
        ),
        SizedBox(
          height: 50,
        ),
        DecoratedBox(
          decoration: BoxDecoration(color: Colors.red),
          child: Transform.rotate(
            //旋转90度
            angle: 90,
            child: Text("Hello world"),
          ),
        ),
        SizedBox(
          height: 50,
        ),
        DecoratedBox(
            decoration: BoxDecoration(color: Colors.red),
            child: Transform.scale(
                scale: 1.5, //放大到1.5倍
                child: Text("Hello world"))),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            DecoratedBox(
              decoration: BoxDecoration(color: Colors.red),
              //将Transform.rotate换成RotatedBox
              child: RotatedBox(
                quarterTurns: 1, //旋转90度(1/4圈)
                child: Text("Hello world"),
              ),
            ),
            Text(
              "你好",
              style: TextStyle(color: Colors.green, fontSize: 18.0),
            )
          ],
        ),
      ],
    );
  }
}
